<template>
  <view>
    <u--form ref="uForm2" :model="form" labelWidth="130" labelPosition="left">
      <view v-if="step === 0">
        <view class="base-header">基础信息</view>
        <view class="form-item-wrap">
          <u-form-item label="编号" prop="houseNo" required borderBottom customStyle="height:80rpx;">
            <u--input
              v-model="form.houseNo"
              border="none"
              placeholder="必填，请输入编号"
              @blur="handleCheckHouseNo(form.houseNo)"
            ></u--input>
          </u-form-item>
          <u-form-item label="对象名称" borderBottom customStyle="height:80rpx;">
            <u--input v-model="form.objName" border="none" placeholder="请输入对象名称"></u--input>
          </u-form-item>
          <u-form-item label="设施编号" borderBottom customStyle="height:80rpx;">
            <u--input v-model="form.equNo" border="none" placeholder="请输入设施编号"></u--input>
          </u-form-item>
          <u-form-item label="详细地址" borderBottom customStyle="height:80rpx;">
            <u--input v-model="form.address" border="none" placeholder="请输入详细地址"></u--input>
          </u-form-item>
          <u-form-item
            label="中心经纬度"
            prop="position"
            required
            borderBottom
            customStyle="height:80rpx;"
            @click="selectAddress"
          >
            <u--input v-model="form.position" disabled border="none" placeholder="必填，请定位" disabledColor="#fff">
            </u--input>
            <image slot="right" style="width: 72rpx; height: 72rpx" src="http://123.156.228.151:3000/images/img/map.png" mode="">
            </image>
          </u-form-item>
          <u-form-item label="联系人" borderBottom customStyle="height:80rpx;">
            <u--input v-model="form.contactor" border="none" placeholder="请输入联系人"></u--input>
          </u-form-item>
          <u-form-item label="联系电话" prop="contactTel" borderBottom customStyle="height:80rpx;">
            <u--input v-model="form.contactTel" border="none" placeholder="请输入电话"></u--input>
          </u-form-item>
          <u-form-item label="调查方式" borderBottom labelPosition="top" customStyle="height:80rpx;">
            <u-checkbox-group v-model="form.investigationMethod" placement="row">
              <u-checkbox
                v-for="(item, j) in surveyMethodList"
                :key="j"
                :name="item.name"
                :label="item.label"
                :customStyle="{ marginRight: '12px' }"
              ></u-checkbox>
            </u-checkbox-group>
          </u-form-item>
        </view>
      </view>
      <view v-if="step === 1">
        <view class="base-header">调查内容</view>
        <view class="form-item-wrap">
          <u-form-item label="雨水管网\n基本情况" borderBottom customStyle="height:80rpx;">
            <u--input v-model="form.ysSituation" border="none" placeholder="请输入"></u--input>
          </u-form-item>
          <u-form-item label="污水管网\n基本情况" borderBottom customStyle="height:80rpx;">
            <u--input v-model="form.wsSituation" border="none" placeholder="请输入"></u--input>
          </u-form-item>
          <u-form-item label="管网运行情况" borderBottom customStyle="height:80rpx;">
            <u--input v-model="form.pipSituation" border="none" placeholder="请输入"></u--input>
          </u-form-item>
          <u-form-item
            v-if="name=='婺城区'"
            label="污水治理情况"
            labelWidth="100%"
            borderBottom
            labelPosition="top"
          >
            <u-radio-group v-model="form.treatmentTypes" placement="row">
              <u-radio
                v-for="item in wszl"
                :key="item.name"
                :name="item.name"
                :label="item.label"
                :customStyle="{ marginRight: '12px' ,marginTop: '3px' }"
              ></u-radio>
            </u-radio-group>
            <!-- 已治理类型 -->
            <u-radio-group v-if="form.treatmentTypes==1" v-model="form.inTreatmentTypes" placement="column">
              <u-radio
                v-for="item in wszlYes"
                :key="item.name"
                :name="item.name"
                :label="item.label"
                shape="square"
                :customStyle="{ marginTop: '12px' }"
              ></u-radio>
            </u-radio-group>
            <!-- 未治理类型 -->
              <u-radio-group v-if="form.treatmentTypes==2" v-model="form.unTreatmentTypes" placement="column">
                <u-radio
                  v-for="item in wszlNo"
                  :key="item.name"
                  :name="item.name"
                  :label="item.label"
                  :customStyle="{ marginTop: '12px' }"
                  shape="square"
                ></u-radio>
              </u-radio-group>
              <view class="" v-if="form.treatmentTypes==2&&form.unTreatmentTypes">
                <view class="mar20">图片</view>
                <view class="" style="display: flex;align-items: center;">
                  <view v-if="form.unTreatmentPic&&tp.length==0" style="display: flex;">
                     <image style="width: 150rpx; height: 150rpx" v-for="(src, index) in JSON.parse(form.unTreatmentPic || '[]')"
                       :src="src.picUrl" :key="index" mode="aspectFit" @click="clickImg(src.picUrl,index)">
                     </image>
                   </view>
                   <u-upload width="100" height="100" :previewFullImage="true" :fileList="tp"
                   	name="tp" @afterRead="afterRead" @delete="deletePic" multiple
                   	:maxCount="6">
                   </u-upload>    
                </view>       
              </view>                                     
          </u-form-item>
          <u-form-item label="进水口内底标高" borderBottom customStyle="height:80rpx;">
            <u--input v-model="form.jskndbg" border="none" placeholder="请输入"></u--input>
          </u-form-item>
          <u-form-item label="出水口内底标高" borderBottom customStyle="height:80rpx;">
            <u--input v-model="form.cskndbg" border="none" placeholder="请输入"></u--input>
          </u-form-item>
          <u-form-item label="至市政管网的\n排水管道长度" borderBottom customStyle="height:80rpx;">
            <u--input v-model="form.zscgcd" border="none" placeholder="请输入"></u--input>
            <text slot="right">m</text>
          </u-form-item>
          <u-form-item label="进水管径" borderBottom customStyle="height:80rpx;">
            <u--input v-model="form.jsgj" border="none" placeholder="请输入"></u--input>
            <text slot="right">cm</text>
          </u-form-item>
          <u-form-item label="出水管径" borderBottom customStyle="height:80rpx;">
            <u--input v-model="form.csgj" border="none" placeholder="请输入"></u--input>
            <text slot="right">cm</text>
          </u-form-item>
          <u-form-item
            label="主要管材材质"
            borderBottom
            @click="
              pipeMaterialShow = true;
              hideKeyboard();
            "
          >
            <u--input
              :value="form.pipMaterial | showPipeMaterial"
              disabled
              border="none"
              placeholder="请选择"
              disabledColor="#fff"
            >
            </u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <u-form-item
            label="主要预处理设施"
            borderBottom
            customStyle="height:80rpx;"
            @click="
              preSituationShow = true;
              hideKeyboard();
            "
          >
            <u--input
              :value="form.preEqu | formaterPreSituation"
              disabled
              border="none"
              placeholder="请选择"
              disabledColor="#fff"
            ></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <u-form-item
            v-if="false"
            label="设施投用年份"
            borderBottom
            @click="
              dateShow = true;
              hideKeyboard();
            "
          >
            <u--input :value="form.equYear" disabled border="none" placeholder="请选择" disabledColor="#fff">
            </u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <u-form-item
            label="设施投用年份"
            prop="equYear"
            borderBottom
            @click="
              dateShow = true;
              hideKeyboard();
            "
          >
            <u-input
              v-model="form.equYear"
              disabled
              disabledColor="#ffffff"
              placeholder="请选择"
              border="none"
            ></u-input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <u-form-item label="设施日常养护频率" labelPosition="top" labelWidth="100%" customStyle="height:120rpx;">
            <u-row justify="space-between" gutter="10">
              <u-col span="6">
                <u-form-item
                  borderBottom
                  labelWidth="0"
                  customStyle="height:60rpx;"
                  @click="
                    curingPeriodShow = true;
                    hideKeyboard();
                  "
                >
                  <u--input
                    :value="form.rcyhzq | formaterCuringPeriod"
                    disabled
                    border="none"
                    placeholder="请选择周期"
                    disabledColor="#fff"
                  >
                  </u--input>
                  <u-icon slot="right" name="arrow-right"></u-icon>
                </u-form-item>
              </u-col>
              <u-col span="6">
                <u-form-item borderBottom labelWidth="0" customStyle="height:60rpx;">
                  <u--input v-model="form.rcyhpl" type="number" border="none" placeholder="请输入频率"> </u--input>
                  <view slot="right">次</view>
                </u-form-item>
              </u-col>
            </u-row>
          </u-form-item>
          <u-form-item label="养护单位名称" prop="houseNo" borderBottom customStyle="height:80rpx;">
            <u--input v-model="form.equDwmc" border="none" placeholder="请输入"></u--input>
          </u-form-item>
          <u-form-item label="养护联系方式" prop="houseNo" borderBottom customStyle="height:80rpx;">
            <u--input v-model="form.equTel" border="none" placeholder="请输入"></u--input>
          </u-form-item>
          <u-form-item label="其它需要说明\n的事项" prop="houseNo" borderBottom customStyle="height:80rpx;">
            <u--input v-model="form.remark" border="none" placeholder="请输入"></u--input>
          </u-form-item>
        </view>
      </view>
      <view v-show="step === 2">
        <view class="base-header">现场示意图</view>
        <view class="form-item-wrap">
          <view v-for="(question, i) in form.quesList" :key="i">
            <u-form-item :label="'问题' + (i + 1)">
              <!-- <image
								style="width: 43.33rpx; height: 43.33rpx; margin: 0 0 0 auto"
								src="https://zjhcsj.com/images/img/trash.png" mode=""
								@click="deleteQuestion(i)"></image> -->

              <u-icon
                custom-style="width: 43.33rpx; height: 43.33rpx; margin: 0 0 0 auto"
                color="#ddd"
                size="30"
                name="trash"
                @click="deleteQuestion(i)"
              ></u-icon>
            </u-form-item>
            <view class="question-container">
              <u-form-item
                label="问题类型"
                borderBottom
                @click="
                  problemTypeShow = true;
                  quesIndex = i;
                  hideKeyboard();
                "
                :key="i"
              >
                <u--input
                  :key="i"
                  :value="question.quesType | showQuesTypeVal(questionType)"
                  disabled
                  border="none"
                  placeholder="请选择问题类型"
                  disabledColor="#fff"
                >
                </u--input>
                <u-icon slot="right" name="arrow-right"></u-icon>
              </u-form-item>
              <u-form-item label="问题描述" borderBottom :key="i">
                <u-input v-model="question.quesDesc" border="none" placeholder="请输入问题描述"></u-input>
              </u-form-item>
              <view class="files-container">
                <view v-if="question.picDataList.length" class="pic-wrap">
                  <view v-for="(pic, j) in question.picDataList" :key="j" class="pic-item">
                    <u-icon
                      custom-style="position: absolute; top: 4rpx;right: 4rpx;"
                      name="close-circle"
                      color="#ddd"
                      size="16"
                      @click="handleClearImg(i, j)"
                    ></u-icon>
                    <image class="pic-dom" mode="aspectFit" :src="pic.url" @click="handleViewPic(pic.url)"></image>
                  </view>
                </view>
                <u-icon
                  v-else
                  custom-style="border:1px solid #ddd;padding: 20rpx;"
                  name="plus"
                  color="#ddd"
                  size="80"
                  @click="handleTuYa(i)"
                ></u-icon>
              </view>
            </view>
          </view>
          <u-button type="primary" :plain="true" text="新增问题" @click="addQuestion"></u-button>
        </view>
      </view>
    </u--form>
    <view class="page-btn-wrap">
      <view class="btn-item">
        <u-button
          type="primary"
          :text="step < 2 ? '下一步' : '提交'"
          customStyle="margin: auto 0"
          @click="submit"
        ></u-button>
      </view>
    </view>
    <u-picker
      v-if="questionType.length"
      :show="problemTypeShow"
      keyName="label"
      :columns="[questionType]"
      @confirm="handleConfirmQues"
      @cancel="problemTypeShow = false"
    ></u-picker>
    <u-picker
      v-if="pipeMaterialShow"
      :show="pipeMaterialShow"
      title="管材材质"
      keyName="label"
      :columns="[pipeMaterialList]"
      @confirm="handleConfirmPipeMaterial"
      @cancel="pipeMaterialShow = false"
    ></u-picker>
    <u-picker
      v-if="preSituationShow"
      :show="preSituationShow"
      keyName="label"
      :columns="[preSituationList]"
      @confirm="handleConfirmPreSituation"
      @cancel="preSituationShow = false"
    ></u-picker>
    <u-picker
      v-if="curingPeriodShow"
      :show="curingPeriodShow"
      title="周期"
      keyName="label"
      :columns="[curingPeriodList]"
      @confirm="handleConfirmCuringPeriod"
      @cancel="curingPeriodShow = false"
    ></u-picker>
    <u-datetime-picker
      ref="datetimePicker"
      :show="dateShow"
      v-model="dateVal"
      mode="year-month"
      :maxDate="Number(new Date())"
      :minDate="Number(new Date('2010-01'))"
      closeOnClickOverlay
      @confirm="confirmEquYear"
      @cancel="dateShow = false"
      @close="dateShow = false"
    ></u-datetime-picker>
  </view>
</template>
<script>
import {
  waterGoingTypes,
  surveyMethodList,
  pretreatmentPlanList,
  pipeMaterialList,
  preSituationList,
  curingPeriodList,
} from '@/config/enumeration.js';
import { getDictItemInfo } from '@/api/system';
import { houseInfoAdd, houseInfoEdit, queryHouseInfoById, isEquNoOnly,commonUploadPic } from '@/api/houseInfo.js';
import uploadImg from '../components/upload-img/upload-img.vue';
export default {
  name: 'other',
  props: {
    step: {
      type: Number,
      require: true,
    },
    name: {
      type: String,
      require: true,
    },
    houseInfoPageParams: {
      type: Object,
      require: true,
    },
  },
  filters: {
    showQuesTypeVal: (quesType, questionType) => {
      const val = (questionType.find((x) => x.value === quesType) || {}).label;
      return val;
    },
    showPipeMaterial: (pipeMaterial) => {
      const val = (pipeMaterialList.find((x) => x.value === +pipeMaterial) || {}).label;
      return val;
    },
    formaterPreSituation: (preEqu) => {
      const val = (preSituationList.find((x) => x.value === +preEqu) || {}).label;
      return val;
    },
    formaterCuringPeriod: (curingPeriod) => {
      const val = (curingPeriodList.find((x) => x.value === +curingPeriod) || {}).label;
      return val;
    },
  },
  components: {
    uploadImg,
  },
  data() {
    return {
      tp: [],
      wszl:[{
      	name: '1',
      	label: '污水已治理'
      }, {
      	name: '2',
      	label: '污水未治理'
      },{
      	name: '3',
      	label: '管控治理'
      }],
      wszlYes:[{
      	name: '1',
      	label: '接入终端'
      }, {
      	name: '2',
      	label: '接入污水处理厂'
      },{
      	name: '3',
      	label: '用户治理'
      }],
      wszlNo:[{
      	name: '1',
      	label: '完全未治理'
      }, {
      	name: '2',
      	label: '部分未治理'
      }],
      quesIndex: 0,
      form: {
        type: 3,
        houseNo: '', // 编号
        objName: '', // 对象名称
        equNo: '', // 设施编号
        address: '', //详细地址
        position: '', //经纬字符串
        longitude: '', // 经度
        latitude: '', // 维度
        contactor: '', // 排水联系人
        contactTel: '', // 联系电话
        investigationMethod: [], // 调查方式
        ysSituation: '', // 雨水管网\n基本情况
        wsSituation: '', // 污水管网\n基本情况
        pipSituation: '', // 管网运行情况
        jskndbg: '', // 进水口内底标高
        cskndbg: '', // 出水口内底标高
        zscgcd: '', //至市政管网的\n排水管道长度
        jsgj: '', //进水管径
        csgj: '', //出水管径
        pipMaterial: '', //主要管材材质
        preEqu: '', //主要预处理设施
        equYear: '', //设施投用年份
        rcyhzq: '', //设施日常养护周期
        rcyhpl: '', //设施日常养护频率
        equDwmc: '', //养护单位名称
        equTel: '', //养护联系方式
        remark: '', //其他事项
        quesList: [
          {
            quesType: '',
            quesDesc: '',
            picDataList: [],
          },
        ],
        treatmentTypes:'',
        inTreatmentTypes:'',
        unTreatmentTypes:'',
        unTreatmentPic:''
      },
      rules: {
        houseNo: {
          type: 'string',
          required: true,
          message: '请输入编号',
          trigger: ['blur'],
        },
        position: {
          type: 'string',
          required: true,
          message: '必填，请定位',
          trigger: ['change'],
        },
      },
      waterGoingTypes, // 污水去向选项
      surveyMethodList, // 调查方式选项
      pretreatmentPlanList, // 主要预处理设施选项
      questionInit: {
        quesType: '',
        quesDesc: '',
        picDataList: [],
      },
      questionType: [],
      problemTypeShow: false,
      editHouseInfo: {},
      dischargeStandardShow: false, // 是否显示排放标准
      dischargeStandardList: [], // 字典-排放执行标准
      flowListShow: false, // 是否显示选择去向
      flowList: [], // 字典-选择去向
      flowType: '', // 选择去向表单key
      sfzyzxjkShow: false, // 是否显示排口是否\n装有在线监控
      ywflqkShow: false, // 是否显示雨污分流情况
      ywflqklist: [], // 字典-雨污分流情况
      disabledNext: false,
      pipeMaterialShow: false,
      pipeMaterialList, // 主要管材材质
      preSituationShow: false,
      preSituationList, // 预处理设施
      curingPeriodShow: false,
      curingPeriodList, // 养护周期
      yearArr: [], // 年份
      dateShow: false,
      dateVal: '',
    };
  },
  watch: {
    houseInfoPageParams: {
      handler: function (houseInfo) {
        if (houseInfo?.id) {
          this.getHouseInfo(houseInfo.id);
        }
      },
      immediate: true,
    },
  },
  onReady() {
    //字典 房屋问题类型 ps_house_question_type
    this.getDictListFun('ps_house_question_type');
    this.initYearArr();
  },
  methods: {
    async afterRead(event) {
    	// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
    	let lists = [].concat(event.file)
    	let fileListLen = this[event.name].length
    	lists.map((item) => {
    		this[event.name].push({
    			...item,
    			status: 'uploading',
    			message: '上传中'
    		})
    	})
    	for (let i = 0; i < lists.length; i++) {
    		const result = await this.uploadFilePromise(lists[i].url)
    		let item = this[event.name][fileListLen]
    		this[event.name].splice(fileListLen, 1, Object.assign(item, {
    			status: 'success',
    			message: '',
    			url: result
    		}))
    		fileListLen++
    	}
    },
    // 删除图片
    deletePic(event) {
    	this.tp.splice(event.index, 1)
    },
    // 图片预览功能
    clickImg(url, index) {
      var imageArr = [];
      imageArr.push(url);
      //uniapp预览轮播图方法
      uni.previewImage({
        current: index, //预览图片的下标
        urls: imageArr //预览图片的地址，必须要数组形式
      })
    },
    async uploadFilePromise(url) {
    	const res = await commonUploadPic(url)
    	console.log(res, 'uploadHttp')
    	let d = JSON.parse(res.data)
    	if (d.code == 200) {
    		return d.result
    	}
    },
    initYearArr() {
      const yearArr = [];
      const curDateYear = new Date().getFullYear();
      for (let i = 2010; i <= curDateYear; i++) {
        yearArr.push(i);
      }
      this.yearArr = yearArr;
    },
    handleConfirmQues(res) {
      this.form.quesList[this.quesIndex].quesType = res.value[0].value;
      this.problemTypeShow = false;
    },
    handleConfirmPipeMaterial(res) {
      this.form.pipMaterial = res.value[0].value;
      this.pipeMaterialShow = false;
    },
    handleConfirmPreSituation(res) {
      this.form.preEqu = res.value[0].value + '';
      this.preSituationShow = false;
    },
    handleConfirmCuringPeriod(res) {
      this.form.rcyhzq = res.value[0].value + '';
      this.curingPeriodShow = false;
    },
    confirmEquYear(e) {
      this.form.equYear = new Date(e.value).format('yyyy-MM');
      this.dateShow = false;
    },
    async handleCheckHouseNo(houseNo) {
      try {
        if (!houseNo) return;
        const { data } = await isEquNoOnly({
          no: houseNo,
          townId: this.townId,
        });
        if (!data.result) {
          this.disabledNext = true;
          uni.showToast({
            title: '编号重复，请修改！',
            icon: 'error',
          });
        } else {
          this.disabledNext = false;
        }
      } catch (e) {
        //TODO handle the exception
        this.disabledNext = false;
      }
    },
    async getHouseInfo(id) {
      try {
        const res = await queryHouseInfoById({
          id,
        });
        console.log('houseInfo', res);
        const editHouseInfo = res.data.result;
        this.editHouseInfo = editHouseInfo;
        const dataPartInfo = editHouseInfo?.data || {};
        console.log('editHouseInfo', editHouseInfo);
        let quesListPartInfo = [
          {
            quesType: '',
            quesDesc: '',
            picDataList: [],
          },
        ];
        if (editHouseInfo?.quesList.length) {
          quesListPartInfo = editHouseInfo?.quesList.map((x) => {
            try {
              x.quesType = x.quesType + '';
              x.picDataList = x.picData ? JSON.parse(x.picData) : [];
              x.picDataList = x.picDataList.map((x) => {
                return {
                  url: x.picUrl,
                  name: x.picName,
                };
              });
              return x;
            } catch (e) {}
            return x;
          });
        }
        // 反填充表单数据
        const investigationMethod = (dataPartInfo.investigationMethod || '').split(',').map((item) => +item);
        const position = dataPartInfo.longitude + ',' + dataPartInfo.latitude;
        this.form = {
          type: 2,
          houseNo: dataPartInfo.houseNo || '', // 编号
          objName: dataPartInfo.objName || '', // 对象名称
          equNo: dataPartInfo.equNo || '', // 设施编号
          address: dataPartInfo.address || '', //详细地址
          position: dataPartInfo.longitude ? position : '', //经纬字符串
          longitude: dataPartInfo.longitude || '', // 经度
          latitude: dataPartInfo.latitude || '', // 维度
          contactor: dataPartInfo.contactor || '', // 排水联系人
          contactTel: dataPartInfo.contactTel || '', // 联系电话
          investigationMethod, // 调查方式
          ysSituation: dataPartInfo.ysSituation || '', // 雨水管网\n基本情况
          wsSituation: dataPartInfo.wsSituation || '', // 污水管网\n基本情况
          pipSituation: dataPartInfo.pipSituation || '', //管网运行情况
          jskndbg: dataPartInfo.jskndbg || '', // 进水口内底标高
          cskndbg: dataPartInfo.cskndbg || '', // 出水口内底标高
          zscgcd: dataPartInfo.zscgcd || '', // 至市政管网的\n排水管道长度
          jsgj: dataPartInfo.jsgj || '', //进水管径
          csgj: dataPartInfo.csgj || '', //出水管径
          pipMaterial: dataPartInfo.pipMaterial || '', //主要管材材质
          preEqu: dataPartInfo.preEqu || '', //主要预处理设施
          equYear: dataPartInfo.equYear || '', //设施投用年份
          rcyhzq: dataPartInfo.rcyhzq || '', //设施日常养护周期
          rcyhpl: dataPartInfo.rcyhpl || '', //设施日常养护频率
          equDwmc: dataPartInfo.equDwmc || '', //养护单位名称
          equTel: dataPartInfo.equTel || '', // 养护联系方式
          remark: dataPartInfo.remark || '', //其他事项
          quesList: [...quesListPartInfo],
          treatmentTypes:dataPartInfo.treatmentTypes||'',//治理类型
          inTreatmentTypes:dataPartInfo.inTreatmentTypes||'',//已治理类型
          unTreatmentTypes:dataPartInfo.unTreatmentTypes||'',//未治理类型
          unTreatmentPic:dataPartInfo.unTreatmentPic||''
        };
      } catch (e) {
        //TODO handle the exception
      }
    },
    async submit() {
      if (this.step === 0) {
        if (this.disabledNext) {
          uni.showToast({
            title: '编号重复，请修改！',
            icon: 'error',
          });
          return;
        }
        const { houseNo, position } = this.form;
        if (!(houseNo || position)) {
          // uni.$u.toast('请填写必填信息');
          uni.showToast({
            title: '请填写必填信息',
            icon: 'error',
          });
          return;
        }
        this.$emit('setStep', 1);
      }
      if (this.step === 1) {
        this.form.unTreatmentPic=JSON.stringify(this.tp.map(item => item.url).map(url =>url))
           if (this.tp.length == 0&&this.form.treatmentTypes==2) {
           	uni.showToast({
           		title: '请上传图片',
           		icon: 'none'
           	})
           	return
           }
        this.$emit('setStep', 2);
      }
      if (this.step === 2) {
        try {
          // this.$refs.uForm.validate()
          const investigationMethod = this.form.investigationMethod.join(',');
          const quesList = this.form.quesList
            .filter((item) => {
              return item.quesDesc || item.quesType || item.picDataList.length;
            })
            .map((question) => {
              question.picDataList = question.picDataList.map((x) => {
                return {
                  picName: x.name,
                  picUrl: x.url,
                };
              });
              return question;
            });
          console.log(quesList, 'quesList');
          const param = {
            ...this.form,
            ...this.houseInfoPageParams,
            investigationMethod,
          };
          if (param.id) {
            // 编辑
            const res = await houseInfoEdit(param);
          } else {
            // 新增
            const res = await houseInfoAdd(param);
          }
          uni.showToast({
            title: '已提交',
            icon: 'success',
          });
          this.$emit('handleRefresh');
          uni.navigateBack();
        } catch (e) {
          //TODO handle the exception
          uni.showToast({
            title: e,
            icon: 'none',
          });
        }
      }
    },
    async getDictListFun(dictCode) {
      try {
        const res = await getDictItemInfo({
          dictCode,
        });
        this.questionType = (res.data.result || []).map((x) => {
          return {
            name: x.itemText,
            label: x.itemText,
            value: x.itemValue,
          };
        });
      } catch (e) {
        //TODO handle the exception
      }
    },
    selectAddress() {
      // 点击调起地图选择位置
      const that = this;
      uni.authorize({
        scope: 'scope.userLocation',
        success(res) {
          // 选择位置
          uni.chooseLocation({
            success: function (res) {
              // console.log('选择地点成功', res)
              that.form.position = res.longitude + ',' + res.latitude;
              that.form.longitude = res.longitude;
              that.form.latitude = res.latitude;
              // that.$forceUpdate();
              that.$refs.uForm2.validateField('position');
            },
            fail(error) {
              // console.log('选择位置失败', error)
            },
          });
        },
      });
    },
    addQuestion() {
      this.form.quesList.push({
        ...this.questionInit,
      });
    },
    hideKeyboard() {
      uni.hideKeyboard();
    },
    deleteQuestion(i) {
      const quesList = this.form.quesList;
      if (quesList.length === 1) {
        this.form.quesList = [
          {
            quesType: null,
            quesDesc: null,
            picDataList: [],
          },
        ];
      } else {
        this.form.quesList.splice(i, 1);
      }
    },
    handleTuYa(i) {
      this.tuyaIndex = i;
      uni.navigateTo({
        url: '/subpak_survey/tuya/tuya',
        events: {
          resetQues: (editedPic) => {
            console.log(editedPic);
            this.form.quesList[this.tuyaIndex].picDataList = [editedPic];
          },
        },
        success: (res) => {
          // 通过eventChannel向被打开页面传送数据
          res.eventChannel.emit('showTuya', this.form.quesList[i]);
        },
      });
    },
    handleViewPic(picPath) {
      console.log('handleViewPic', picPath);
      // 预览图片
      uni.previewImage({
        urls: [picPath],
      });
    },
    handleClearImg(i, j) {
      this.form.quesList[i].picDataList.splice(j, 1);
    },
  },
};
</script>
<style scoped lang="scss">
.base-header {
  position: relative;
  height: 50rpx;
  line-height: 50rpx;
  padding: 24rpx 24rpx 0;
  font-weight: 500;
  font-size: 36rpx;
  color: #000000e6;

  &::before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 34rpx;
    width: 6rpx;
    height: 32rpx;
    background: #3576f2;
  }
}

.form-item-wrap {
  padding: 0 24rpx 40rpx;
}

.page-btn-wrap {
  position: fixed;
  display: flex;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 166rpx;
  box-shadow: 0 -4rpx 24rpx 0 #00000014;
  background: white;
  z-index: 99;
}

.tip-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 77rpx;
  padding: 0 18rpx;
  background: #dae7ff;
  font-size: 32rpx;
  color: #000000cc;
}

.tip-left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.files-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 32rpx 24rpx;
}

.btn-item {
  padding: 16rpx 32rpx 0 32rpx;
  width: 100%;
  height: 100%;
}

.pic-wrap {
  width: 100%;
  height: 100%;
}

.pic-item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pic-close-btn {
  position: absolute;
  top: 24rpx;
  right: 24rpx;
}
.mar20 {
		margin-bottom: 20rpx;
	}
</style>
